<template>
  <v-container style="min-height: 100vh; max-width: 1500px">
    <div class="justify-center d-flex text-center mt-10">
      <div>
        <img src="@/static/img/icon/shop2.png" style="width: 39px" />
        <h2 class="mt-2">商城</h2>
      </div>
    </div>
    <div class="shop-box">
      <div class="shopBoxTop" v-if="typeList.length > 0">
          <div class="typeImgBig">
            <div class="typeImgSmall" :class="[currentInd == -1 ? 'typeImgSmallActive':'']"
                 @click="changeType('',-1)"
            >
              <div class="typeImg typeImgAll">
                <img src="@/static/img/icon/typeAll.png" class="typeImgAllItem"/>
              </div>
              <div class="typeTex">全部</div>
            </div>
            <div v-for="(it,ind) in typeList" :key="ind"
             class="typeImgSmall"
                 @click="changeType(it,ind)"
                 :class="[ind == currentInd ? 'typeImgSmallActive':'']"
            >
              <img :src="it.image" class="typeImg" v-if="it.image">
              <div class="typeTex">{{it.type_name}}</div>
            </div>
          </div>
      </div>
      <v-row align="center" class="shop-header my-10" justify="space-between">
        <v-col class="right" cols="12" md="6">
          <el-select
            v-model="order"
            class="price"
            placeholder="价格排序"
            @change="skinList"
          >
            <el-option label="价格从低到高" value="asc"></el-option>
            <el-option
              class="option2"
              label="价格从高到低"
              value="desc"
            ></el-option>
          </el-select>
          <div class="search pl-2">
            <input v-model="keyword" placeholder="请输入商品名称" type="text" />
            <span>
              <i class="el-icon-search" @click="search"></i>
            </span>
          </div>
        </v-col>
      </v-row>
      <div class="shop-list">
        <v-row no-gutters>
          <v-col
            v-for="(i, index) in list"
            class="pa-1"
            cols="6"
            md="2"
            :key="index"
          >
            <div class="shop-item d-flex flex-column">
              <div class="img">
                <div class="img-box">
					<img :src="i.image_url" class="item-img" />
				</div>
                <p style="margin: 0.4rem 0px 0px" class="text-overflow-2">
                  {{ i.item_name }}
                </p>
              </div>

              <v-spacer></v-spacer>
              <div class="price mb-1 text-center" @click="buy(i)">
                <img src="@/static/img/icon/diamonds.png" />
                <span>
                  {{ i.price }}
                </span>
              </div>
            </div>
          </v-col>
        </v-row>
      </div>

      <div class="text-center">
        <el-pagination
          :page-size="page_size"
          :total="total"
          background
          pager-count="4"
          class="mt-12"
          hide-on-single-page
          layout="prev, pager, next"
          @current-change="currentChange"
        />
      </div>

      <buy-dialog
        v-model="showDialog"
        :detail="currentShop"
        @close="showDialog = false"
      ></buy-dialog>
    </div>
  </v-container>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import ShopService from "@/services/ShopService";
import BuyDialog from "./components/BuyDialog.vue";
import { SkinItem } from "@/types";

export default defineComponent({
  name: "Shop",
  setup() {
    let currentShop: SkinItem | null = null;

    const state = reactive({
      classify: "csgo",
      shopTab: "hot",
      app_id: 730,
      type: "",
      order: "desc",
      list: "",
      total: "",
      keyword: "",
      showDialog: false,
      currentShop,
      page: 1,
      page_size: 48,
      typeList:[],
      currentInd:-1
    });

    onMounted(() => {
      skinList();
      getFilt()
    });
    const getFilt = async ()=>{
      let res = await ShopService.getSkinFilters()
      if(res.data.code == 0){
        state.typeList = res.data.data
      }
    }

    function changeType(item,index) {
         state.currentInd = index
         state.type = item ? item.type_id : ''
         skinList()
    }
    const buy = async (skin: SkinItem) => {
      state.currentShop = skin;
      state.showDialog = true;
    };

    const handleClick = async () => {
      state.type = state.shopTab;
      await skinList();
    };

    const skinList = async () => {
      const res = await ShopService.skinList({
        app_id: state.app_id,
        type: state.type,
        order: state.order,
        keyword: state.keyword,
      }, {
        page: state.page,
        page_size: state.page_size,
      });
      state.list = res.data.data.list;
      state.total = res.data.data.total;
    };

    const currentChange = async (val) => {
      state.page = val;
      skinList();
    };

    const search = async () => {
      await skinList();
    };

    return {
      ...toRefs(state),
      search,
      handleClick,
      buy,
      skinList,
      currentChange,
      changeType
    };
  },

  components: {
    BuyDialog,
  },
});
</script>

<style lang="scss" scoped>
.shop-title {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3rem auto;

  img {
    width: 34px;
    margin: 0 1rem;
  }

  h2 {
    color: #fff;
    font-size: 26px;
    margin: 0;
  }
}

.shop-box {
  width: 80%;
  margin: 0 auto;
  min-height: 10rem;
}
.shopBoxTop{
  background-color: rgba(54, 55, 70, 0.5);
  box-sizing: border-box;
  margin-top: 30px;
  cursor: pointer;
  .typeImgBig{
    display: flex;
    .typeImgSmall{
      opacity: 0.5;
      padding: 1em;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .typeImg{
        width: 80px;
        height: 80px;
        display: block;
      }
      .typeImgAll{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .typeTex{
        margin-top: 5px;
      }
    }
    .typeImgSmallActive{
       opacity: 1;
       background-color: #54545F;
      .typeTex{
        font-weight: bold;
      }
    }
  }
}
.shop-list {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
  padding: 0;
  flex: 1 1 100%;
  margin: auto;

  .shop-item {
    position: relative;
    min-height: 100px;
    background-color: #36363c;
    padding: 6px;
    height: 100%;

    &:hover {
      background-color: #53535a;

      .price {
        background-color: #7668cb;
      }
    }

    &:nth-of-type(5n + 1) {
      margin-left: 0;
    }

    p {
      text-align: center;
      width: 100%;
      color: #afafaf;
      margin: 0.4rem 0px 0px;
    }

    .price {
      cursor: pointer;
      display: inline-block;
      padding: 0.3rem 0.7rem;
      margin-top: 1rem;
      transform: translateX(-50%);
      position: relative;
      left: 50%;
      border-radius: 4px;
      font-size: 1.3rem;
      font-weight: 700;
      color: #fff;

      img {
        position: relative;
        top: 0.25rem;
        width: 1.5rem;
      }

      span {
        padding-left: 5px;
      }
    }

    .img {
      position: relative;
      width: 100%;

      .item-img {
        width: 100%;
        transform: scale(0.8);
      }
    }
  }
}

.shop-header {
  height: 4rem;
  color: #a4a4ab;

  .right {
    display: flex;
    align-items: center;

    .sort {
      width: 2rem;
      height: 2rem;
      position: relative;

      .active {
        color: #8e7eed;
      }
    }

    .search {
      height: 40px;
      display: flex;
      align-items: center;

      input {
        border: 0;
        outline: none;
        border-radius: 4px 0 0 4px;
        background-color: #44444b;
        color: #a9a9a9;
        height: 100%;
        text-indent: 1rem;
        font-size: 1.1rem;
        width: 12rem;
      }

      span {
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border-radius: 0 4px 4px 0;
        background-color: #44444b;
        height: 100%;
        width: 3rem;
        justify-content: center;
        align-items: center;
        color: #d1d1d1;
      }
    }

    p {
      font-size: 12px;

      &.active {
        color: #8e7eed;
      }
    }
  }
}


@media screen and (max-width: 768px){
  .shop-box {
    width: 100%;
    min-height: 10rem;
  }
  .shopBoxTop{
    margin-top: 10px;
    .typeImgBig{
      .typeImgSmall{
        padding: 2px;
        .typeImg{
           width: 30px;
           height: 30px;
        }
        .typeImgAllItem{
          width: 30px;
          height: 30px;
        }
        .typeTex{
          width: 40px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>


<style lang="scss">
.price {
  & .el-input__inner {
    background-color: #1a1a1e !important;
    color: #fff;
    border: none;
  }
}

.shop-header {
  .el-tabs__nav-wrap {
    &:after {
      display: none;
    }
  }

  .el-tabs__header {
    margin: 0;
  }

  .el-tabs__active-bar {
    display: none;
  }

  .el-input.el-input--small.el-input--suffix {
    width: 100%;

    .el-input__inner {
      background-color: transparent;
      border-color: transparent;
      color: #fff;
      font-weight: 900;
      width: 100px;
    }
  }
}

.img-box{
	position: relative;
	height: 0;
	padding-bottom: 80%;
	overflow: hidden;
}
.img-box img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.8) !important;
}
</style>
